// https://vitepress.dev/guide/custom-theme
import { h } from "vue";
import DefaultTheme from "vitepress/theme";
// import VueImageLightbox from "vue-image-lightbox";
import "./styles/rainbow.css"; // 先不用 好像得跟style.css写一块去
import "./styles/custom.scss"; // 先不用 好像得跟style.css写一块去
import "./styles/site.scss"; // 网址导航页面样式
// import './styles/style.css' 这个是生成的默认的

import "element-plus/dist/index.css";
import ElDropdown from "element-plus";
import mediumZoom from 'medium-zoom'

import home from "../components/home.vue";
import siteList from "../components/siteList.vue";
import siteFooter from "../components/siteFooter.vue";
import Avatar from "../components/Avatar.vue";

/** @type {import('vitepress').Theme} */
export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
      // 自定义文档底部，使用doc-after插槽
      "doc-after": () => h(siteFooter),
      "nav-bar-content-after": () => h(Avatar),
    });
  },
  enhanceApp({ app, router, siteData }) {
    // ...
    //只有浏览器环境需要加载：在 Node.js 环境中window不存在
    if (typeof window !== 'undefined') {
      import('vue-image-lightbox').then(module => {
        const VueImageLightbox = module.default;
        app.component('VueImageLightbox', VueImageLightbox);
      }).catch(err => {
        console.error('Failed to load vue-image-lightbox:', err);
      });
    }

    app.component("Home", home);
    app.component("SiteList", siteList);
    app.use(ElDropdown);
    // app.component("VueImageLightbox", VueImageLightbox);
    app.directive("zoom", {
      mounted(el) {
        mediumZoom(el);
      },
    });
  },
};
